react使用antd的上传组件实现文件表单一起提交

2024-05-31 13:04| 来源: 网络整理| 查看: 265

最近在刚刚开始使用react做项目，非常不熟练，非常小白。小白同学可以阅读了，因为我会写的非常简单，直白。

项目中需要实现表单中带附件提交，上传文件不单独保存调接口。

import { Form, Button, Upload } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; const normFile = (e) => { console.log('Upload event:', e); if (Array.isArray(e)) { return e; } return e && e.fileList; }; const Demo = () => { const onFinish = (values) => { console.log('Received values of form: ', values); }; return (

//fetch请求

method: 'POST',

body: formData,

})

或

axios({ //axios method: 'post', url: url, data: formData, }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

一定要设置了，才可以传参数成功，不然调用接口的时候是不会成功带参数的。

什么样子是成功带了参数呢，可以在相关页面点击F12查看，network，最下方会有Form Data，一栏，会展示所有传过去的参数。

最终代码如下：

import { Form, Button, Upload } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; const normFile = (e) => { console.log('Upload event:', e); const formData = new FormData(); formData.append('file', e.file); if (Array.isArray(e)) { return e; } return e && e.fileList; }; const beforeUpload = ({fileList}) => { return false; } const Demo = () => { const onFinish = (values) => { console.log('Received values of form: ', values); }; return ( Click to upload ); }; ReactDOM.render(, mountNode);

【本文地址】

公司简介

联系我们